<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>以组件形式重写后台管理系统</title>
    <link rel="stylesheet" href="./css/bootstrap.css">
</head>
<body>
    <!-- 基本构造 -->
    <div class="container mt-5">
        <div id="app">
            <div class="row">
                <!-- 左 -->
                <div class="col-sm-3" style="min-width:200px">
                    <main-Menu></main-Menu>
                </div>
                <!-- 右 -->
                <div class="col col-sm-9">
                    <main-content></main-content>
                </div>
            </div>
        </div>
    </div>

    <!-- 模板 -->
    <!-- 左 -->
    <template id="mainMenu">
        <ul class="list-group list-group-flush">
            <li class="list-group-item list-group-item-action" v-for="item in menu">
                <a :href="item.path">{{item.title}}</a>
            </li>
        </ul>
    </template>
    <!-- 右 -->
    <template id="mainContent">
        <div class="container-fluid">
            <div>欢迎进入后台管理系统</div>
            <!-- 用户列表 -->
            <user><user/>
        </div>
    </template>
    <!-- 用户列表 -->
    <template id="user">
        <div>
            <table class="table table-striped table-hover" style="width:100%">
                <thead>
                    <tr>
                        <th scope="col">#</th>
                        <th scope="col">用户名</th>
                        <th scope="col">年龄</th>
                        <th scope="col">性别</th>
                        <th scope="col">操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="item,idx in datalist">
                        <td>{{idx+1}}</td>
                        <td>{{item.username}}</td>
                        <td>{{item.age?item.age:parseInt(Math.random()*60)}}</td>
                        <td>{{item.gender?item.gender:'未设置'}}</td>
                        <td>
                            <div class="btn-group btn-group-sm">
                                <button class="btn btn-success">编辑</button>  
                                <button class="btn btn-danger" @click="removeItem(item._id)">删除</button>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </template>

    <script src="./js/vue.js"></script>
    <script>
        // 3. 用户列表
        const user = {
            // 模板
            template:'#user',
            // 数据
            data(){
                return {
                    datalist: [{ "_id": "5f2d1deec24a6d73484352a5", "username": "laoxie", "password": "0847c487af6ee0236110330d2c2b9ae6", "age": "20", "gender": "男", "avatarUrl": "/uploads/avatar-1597216066044.jpg" }, { "_id": "5f338ee11860ab4560d790fb", "username": "jingjing", "password": "4bd6fb9802874037077ec81d248aba8c", "avatarUrl": "/uploads/avatar-1597215932948.png" }, { "_id": "5f338f071860ab4560d790fc", "username": "不穿衣服的公羊", "password": "0847c487af6ee0236110330d2c2b9ae6", "avatarUrl": "/uploads/avatar-1597216026531.png" }]
                }
            },
            // 事件方法
            methods:{
                // 删除事件
                removeItem(idx){
                    this.datalist = this.datalist.filter(item=>{
                        return item._id !== idx;
                    })
                }
            }
        }

        // 2. 设置全局组件：左侧菜单mainMenu和右侧内容mainContent
        /* 
            mainMenu为自定义标签名称，在html里会转变为main-menu
        */
        // 2.1 菜单
        Vue.component('mainMenu',{
            data:function(){
                return {
                    name: '后台管理系统',
                    menu: [{
                        title: '首页',
                        path: 'index.html'
                    }, {
                        title: '用户管理',
                        path: 'manage/user.html'
                    }, {
                        title: '商品管理',
                        path: 'manage/goods.html'
                    }, {
                        title: '订单管理',
                        path: 'manage/order.html'
                    }]
                }
            },
            // 模板：直接在模板属性里没有高亮和报错提示，所以可以像vue实例那样进行挂载
            /* template:`
                <ul class="list-group list-group-flush">
                    <li class="list-group-item list-group-item-action" v-for="item in menu">
                        <a :href="item.path">{{item.text}}</a>
                    </li>
                </ul>
            ` */
            template:'#mainMenu'
        })

        // 2.2 内容
        Vue.component('mainContent',{
            template:"#mainContent",
            // 3. 注册局部组件：用户列表user
            components:{
                user
            }
        })

        // 1. 实例化
        var vm = new Vue({
            el:'#app'
        })
    </script>
</body>
</html>